<template>
  <div class="compress-view">
    <h2>视频压缩</h2>
    <div class="card">
      <div class="upload-area" @click="selectFile">
        <p v-if="!inputFile">点击选择视频文件</p>
        <p v-else>{{ inputFile }}</p>
      </div>

      <div v-if="videoInfo" class="video-info">
        <h3>视频信息</h3>
        <p>时长: {{ formatDuration(videoInfo.duration) }}</p>
        <p>大小: {{ formatSize(videoInfo.size) }}</p>
        <p>分辨率: {{ videoInfo.video?.width }} × {{ videoInfo.video?.height }}</p>
      </div>

      <div v-if="inputFile" class="options">
        <div class="option-group">
          <label>压缩质量</label>
          <select v-model="quality">
            <option value="high">高质量 (文件较大)</option>
            <option value="medium">中等质量 (推荐)</option>
            <option value="low">低质量 (文件最小)</option>
          </select>
        </div>

        <button @click="compress" :disabled="processing" class="btn-primary">
          {{ processing ? '压缩中...' : '开始压缩' }}
        </button>

        <div v-if="progress > 0" class="progress-bar">
          <div class="progress-fill" :style="{ width: progress + '%' }"></div>
          <span class="progress-text">{{ progress.toFixed(1) }}%</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputFile = ref('');
const videoInfo = ref<any>(null);
const quality = ref('medium');
const processing = ref(false);
const progress = ref(0);

const selectFile = async () => {
  const result = await window.electronAPI.dialog.openFile({
    filters: [{ name: 'Videos', extensions: ['mp4', 'avi', 'mov', 'mkv', 'webm'] }],
  });

  if (!result.canceled && result.filePaths[0]) {
    inputFile.value = result.filePaths[0];
    const info = await window.electronAPI.video.getInfo(inputFile.value);
    if (info.success) {
      videoInfo.value = info.data;
    }
  }
};

const compress = async () => {
  const result = await window.electronAPI.dialog.saveFile({
    defaultPath: 'compressed.mp4',
    filters: [{ name: 'Video', extensions: ['mp4'] }],
  });

  if (result.canceled || !result.filePath) return;

  processing.value = true;
  progress.value = 0;

  const unsubscribe = window.electronAPI.video.onProgress((data) => {
    if (data.percent) progress.value = data.percent;
  });

  try {
    await window.electronAPI.video.compress({
      input: inputFile.value,
      output: result.filePath,
      quality: quality.value,
    });

    alert('压缩完成！');
  } catch (error) {
    alert('压缩失败：' + error);
  } finally {
    processing.value = false;
    unsubscribe();
  }
};

const formatDuration = (seconds: number) => {
  const h = Math.floor(seconds / 3600);
  const m = Math.floor((seconds % 3600) / 60);
  const s = Math.floor(seconds % 60);
  return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
};

const formatSize = (bytes: number) => {
  const mb = bytes / 1024 / 1024;
  return mb.toFixed(2) + ' MB';
};
</script>

<style scoped>
@import '../styles/ConvertView.scss';
</style>
